<template>
  <div>
    <div class="search">
      <div v-show="isSearchFormVisible">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="产品名字：">
            <el-input v-model="formInline.user" placeholder="请输入产品名字" size="mini"></el-input>
          
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="formInline.region" placeholder="请输入状态" size="mini">
              <el-option label="待审核" value="0"></el-option>
              <el-option label="审核通过" value="1"></el-option>
               <el-option label="审核未通过" value="2"></el-option>
            </el-select>
              <el-button type="primary" @click="onSubmit" size="mini">搜索</el-button>
            <el-button @click="toggleSearchSectionVisibility" type="primary" size="mini">清空</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button @click="ppp" icon="el-icon-refresh" circle style="margin-left: 83%;"></el-button>
      <el-button icon="el-icon-search" circle @click="toggleSearchSectionVisibility"></el-button>
    </div>

    <div class="table">
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column type="index" width="55" label="序号">
        </el-table-column>
        <el-table-column prop="title" label="商品名" width="">
        </el-table-column>
        <el-table-column prop="title" label="用户昵称" width="">
        </el-table-column>
        <el-table-column prop="title" label="记录时间" width="">
        </el-table-column>
        <el-table-column prop="title" label="回复时间" width="">
        </el-table-column>
        <el-table-column prop="title" label="评价得分" width="">
        </el-table-column>
        <el-table-column prop="title" label="是否匿名" width="">
        </el-table-column>
        <el-table-column prop="name" label="审核状态" width="180">
        </el-table-column>
        <img src="" alt="">
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DocumentsArticleView',

  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      isSearchFormVisible: true,
      isSearchSectionVisible: true,
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    };
  },

  mounted() {
    this.show()
  },

  methods: {
    ppp(){
        window.location.reload(); //页面刷新
    },
    toggleSearchSectionVisibility() {
      this.isSearchFormVisible =!this.isSearchFormVisible;
      this.isSearchSectionVisible =!this.isSearchSectionVisible;
    },
    show() {
      this.$axios({
        method: `get`,
        url: `/api/prod/prodComm/page?t=1740279521339&current=1&size=20`,
        headers: {
         'Authorization': localStorage.getItem('token')
        }
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data.records
      })
    },
    onSubmit() {
      console.log('submit!');
    }
  },
};
</script>

<style scoped>
.button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
</style>